<template>
  <div>
    <div class="customer-area">
      <div class="title">
        <div class="point"></div>
        <span>产品信息</span>
      </div>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>区域</span>
          </div>
        </el-col>
        <el-col :span="19">
          <span>{{ productDetail.area }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>金融产品公司全称</span>
          </div>
        </el-col>
        <el-col :span="19">
          <span>{{ productDetail.companyName }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>方案名称</span>
          </div>
        </el-col>
        <el-col :span="19">
          <span>{{ productDetail.productName }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>最低首付比例</span>
          </div>
        </el-col>
        <el-col :span="19">
          <span>{{ (productDetail.downpayRatio * 100).toFixed(2) }}%</span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>月供类型</span>
          </div>
        </el-col>
        <el-col :span="19">
          <span>
            <template v-if="productDetail.monthlyPayType === 12">等额本息</template>
            <template v-if="productDetail.monthlyPayType === 13">等本等息</template>
          </span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>年利率</span>
          </div>
        </el-col>
        <el-col :span="19">
          <span>{{ (productDetail.annualRateFloor * 100).toFixed(2) }}%</span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>GPS</span>
          </div>
        </el-col>
        <el-col :span="19">
          <span>{{ productDetail.gpsCost||0 }}元</span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>上牌费用</span>
          </div>
        </el-col>
        <el-col :span="19">
          <span>{{ productDetail.licenseCost||0 }}元</span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>其他费用</span>
          </div>
        </el-col>
        <el-col :span="19">
          <span>{{ productDetail.othersCost||0 }}元</span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>总期数</span>
          </div>
        </el-col>
        <el-col :span="19">
          <span>{{ productDetail.period }}期</span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>产品品质</span>
          </div>
        </el-col>
        <el-col :span="19">
          <span>
            <template v-if="productDetail.isQuality === 1">优质&nbsp;&nbsp;</template>
            <template v-if="productDetail.isCommonly === 1">一般&nbsp;&nbsp;</template>
            <template v-if="productDetail.isBlack === 1">黑户&nbsp;&nbsp;</template>
          </span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>返佣</span>
          </div>
        </el-col>
        <el-col :span="19">
          <span>
            <template v-if="productDetail.commission||productDetail.commission===0">{{ productDetail.commission||0 }}元</template>
            <template v-if="!productDetail.commission">{{ (productDetail.commissionRatio * 100).toFixed(2) }}%</template>
          </span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>征信要求</span>
          </div>
        </el-col>
        <el-col :span="19">
          <span>{{ productDetail.creditRequire }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>提车时间</span>
          </div>
        </el-col>
        <el-col :span="19">
          <span>{{ productDetail.pickCarTime }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>金融产品经理</span>
          </div>
        </el-col>
        <el-col :span="19">
          <span>{{ productDetail.productManager }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>金融产品经理手机号</span>
          </div>
        </el-col>
        <el-col :span="19">
          <span>{{ productDetail.phone }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>金融产品特性标签</span>
          </div>
        </el-col>
        <el-col :span="19">
          <span>{{ productDetail.label }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="3">
          <div class="content-title">
            <span>金融产品资料审核材料</span>
          </div>
        </el-col>
        <el-col :span="19">
          <span>{{ productDetail.attrNames }}</span>
        </el-col>
      </el-row>
    </div>
    <div class="foot">
      <el-button @click="() => {this.$router.go(-1)}"
                 type="primary">确定</el-button>
    </div>
  </div>
</template>

<script>
import '@/style/info.scss'
import { api } from '@/api'
import { HTTPSUCCESS, HTTPDATAFAIL, HTTPPARAMFAIL, HTTPUNKOWNFAIL } from '@/components/constant'

export default {
  data() {
    return {
      productDetail: {}
    }
  },
  props: [
    'productId'
  ],
  activated() {
    this.getProductDetail()
  },
  methods: {
    getProductDetail() {
      this.$http._get(api.SYS_PRODUCT_DETAIL, this.productId).then(
        res => {
          if (res.code === HTTPSUCCESS) {
            const area = res.data.cityNames.join('  ')
            const attrNames = res.data.attrs.join('  ')
            this.productDetail = res.data
            this.productDetail.area = area
            this.productDetail.attrNames = attrNames
          } else {
            this.$msg._message('查询失败 请联系系统管理员', 'error')
          }
        }
      )
    }
  }
}
</script>
